﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js "></script>
    <script src="jquery-1.9.1.min.js"></script>

    <style>
        .list-item__title {
            font-size: 1.2em;
            margin: 0.5em;
            margin-left: 0px;
        }
    </style>
</head>
<body>
<ons-page>
    <ons-toolbar>
    
      <div class="center" id="top"><ons-icon size="30px" icon="ion-flame"></ons-icon>    此处为帖子名称</div>
    </ons-toolbar>
<ons-card>

    <div style="height: 150px; padding: 1px 0 0 0;">
  <div class="card" style="height: auto;margin-bottom: 1px;position:absolute;">
    <h2 class="card__title"> Title</h2>
    <div class="card__content" id="init" style="height: auto;margin-bottom: 1px;">帖子内容blabla</div>
  </div>
</div>
    <div class="content" >
      <div style="margin-top:2em;margin-bottom:0.5em;clear:both;position:relative;">
        <ons-button class="hot" style="margin-top:1px;"><ons-icon size="20px" icon="ion-heart" ></ons-icon> 热门评论</ons-button>
        
        <ons-button  href="content2.html"  id="all"><ons-icon size="20px" icon="ion-chatbox-working"></ons-icon> 全部评论</ons-button>
    
      </div>
      
    </div>
    <ons-list-header size=""><span style="font-size:16px;float: left;margin-top: 1px;"   >全部评论</span></ons-list-header>
</ons-card>
  </ons-page>
    <script>      
       /* $.getJSON("test.json", function(data){ 
                            
                var a = data;
                console.log(a.data[0].content);

                  $(".card__title").text(a.data[0].title);
                  $("#init").text(a.data[0].content);


            })

*/
        $.getJSON("test1.json", function(data){ 
                var a = data;
              //  console.log(a);
                //console.log(a.data.reply[1].content);

                    $("#top").text(a.data.title);

                 $(".card__title").text(a.data.title);
                  $("#init").text(a.data.reply[0].content);


                var i = 1;
                while (i < a.data.reply.length) {
                    $(".page__content").append("<ons-list-item><div class=\"left\"><img class=\"list-item__thumbnail\" src=\"http://placekitten.com/g/40/40\"></div><div class=\"center\"><span class=\"list-item__title\">" + a.data.reply[i].content + "</span><span class=\"list-item__subtitle\">"+"by-&nbsp;&nbsp;" + a.data.reply[i].poster.user_name + "</span></div></ons-list-item>");
                    i++;

                }
            })
        $(".hot").click(function () {
                $(".list-item").remove();   
               
              $.getJSON("test0.json", function(data){ 
                 
                a=data;
                var i = 0;
                while (i < a.data.hotreply.length) {
                    $(".page__content").append("<ons-list-item><div class=\"left\"><img class=\"list-item__thumbnail\" src=\"http://placekitten.com/g/40/40\"></div><div class=\"center\"><span class=\"list-item__title\">" + a.data.hotreply[i].content + "</span><span class=\"list-item__subtitle\">" +"by-&nbsp;&nbsp;"+ a.data.hotreply[i].poster.user_name + "</span></div></ons-list-item>");
                    i++;

                }
                if( a.data.reply.length==0)alert("此贴暂无热评");

            })




        })
        
         
     $(function(){
    $("#all").click(function(){
        window.location.reload();
    });
});
    </script>

</body>

</html>